#{set title:'Login' /}
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <link href="/../../../public/stylesheets/style_sheet.css"
              rel="stylesheet" type="text/css" />

        <!--<script src="/../../../public/javascript/jquery.js"
	type="text/javascript"></script>
        <script src="/../../../public/javascript/scripts.js"
	type="text/javascript"></script>-->

        #{get 'moreStyles' /}
        <link rel="shortcut icon" type="image/png"
              href="@{'/public/images/ninjaIcon.png'}">
        <link rel="stylesheet"
              href="/../../../public/javascripts/jquery.jgrowl.css" type="text/css" />
        <link rel="stylesheet"
              href="../../../public/stylesheets/blitzer/jquery-ui-1.8.13.custom.css"
              type="text/css" media="screen" />
        <link rel="stylesheet"
              href="@{'/public/javascripts/fancybox/jquery.fancybox-1.3.4.css'}"
              type="text/css" media="screen" />
        <script src="../../../public/javascripts/jquery-1.5.1.min.js"
        type="text/javascript"></script>
        
    <script type="text/javascript">
    function tryDemo1(){
    	//alert("Try");
    	document.getElementById("username").value="anonymous";
    	document.getElementById("password").value="anonymous";
    }
    </script>
    
    </head>

    <div id="container">
        <div id="header">
            <h1>
                <a href="/">MEGASOFT</a>
            </h1>
            <h2>Software ninjas</h2>
            <div class="clear"></div>
        </div>
        <div id="nav">
            <b>WELCOME!</b>
        </div>

        <style type="text/css">

            b {
                position: relative;
                font-family: Verdana, Geneva, sans-serif;
                font-size: 12px;
                color: whitesmoke;
                left: 45%;
                top: 20%

            }
            body{
                background: #fff url('../../public/images/bodybgSl.gif')
                    repeat-x scroll top left;
                margin: 0;
                padding: 0;
            }
            #username-field{
                color:whitesmoke;
            }
            #password-field{
                color:whitesmoke;
            }
            #remember-field{
                color:whitesmoke;
            }
            #aboutUs{
                color:whitesmoke;
                width:300px;
                background-color: transparent;
                position: relative;
                left: 50%;
                top: 8%;
                text-align: center;
                z-index:2;
            }
            #imgs{
                width:200px;
                height:200px;
                background-color: transparent;
                position: relative;
                left: 10%;
                top:  0%;
                vertical-align: middle;
                z-index: -3;
            }
          
            #content{
                background-color: transparent;
                position: relative;
                height: 50px;
                left: 0%;
                top:  0%;
                text-align: left;
            }
/*            #title{
               // width:20px;
}*/


        </style>
        
       

        <div id="content" style="">
            <div id="login">

                <h1 id="title">&{'secure.title'}</h1>

		#{form @authenticate()} #{if flash.error}
                <h3><a><p class="error">&{flash.error}</p></a></h3>
		#{/if} #{if flash.success}
                <h3><a><p class="success">&{flash.success}</p></a></h3>
		#{/if}

                <p id="username-field">
                    <label for="username">&{'secure.username'}</label> <input type="text"
                                                                              name="username" id="username" value="${flash.username}" />
                </p>
                <p id="password-field">
                    <label for="password">&{'secure.password'}</label> <input
                        type="password" name="password" id="password" value="" />
                </p>
                <p id="remember-field">
                    <input type="checkbox" name="remember" id="remember" value="true"
                           ${flash.remember ? 'checked="true" ' : ''} /> <label for="remember">&{'secure.remember'}</label>
                </p>
                <p id="signin-field">
                    <input type="submit" id="signin" value="&{'secure.signin'}" />
                    <input type="button" id="tryDemo" value="Try" onclick="javascript:tryDemo1()"/>
                </p>
                
                <p id="forget">
                    <a href="@{ForgetPassword.ForgetPassword()}" class="frame" style="background: #333 url('../../public/images/light.png') center center repeat-x; color: white; margin: 5px; padding: 5px 15px; text-decoration: none; border-radius: 4px; font-size: 14px; font-weight: bold;">ForgotPassword</a>
                </p>
                <p id="signUp">
                    <a href="@{SignUp.signUp()}" style="background: #333 url('../../public/images/light.png') center center repeat-x; color: white; margin: 5px; padding: 5px 15px; text-decoration: none; border-radius: 4px; font-size: 14px; font-weight: bold;">Sign Up</a>
                </p>

		#{/form}

            </div>
        </div>
             <div id="aboutUs" >
            <p><h3><a>(: About Us :)</a></h3></p>
            <p>MegaSoft is a company consisting of developers of remarkably high developing skills. What makes MegaSoft stand out from any other company is its team spirit and the high ability of each and every team member. We hope you find our product of high usability building into you a good  towards us
<br>
Enjoy ..</p>
     
        <div id="imgs">
           <img
               src="../../../public/images/logo.gif"
                />
</div>
        </div>

</html>